<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <meta name="description" content="Violate Responsive Admin Template">
    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
    <title>Super Admin Responsive Template</title>
    <!-- CSS -->
    <%@ include file="../inc/new/css.jsp" %>
</head>
<body id="skin-cloth">
<%@ include file="../inc/new/header.jsp" %>
<div class="clearfix"></div>
<section id="main" class="p-relative" role="main">
    <input type="hidden" id="mian_module" value="统计管理">
    <input type="hidden" id="child_module" value="作品统计列表">
    <%@ include file="../inc/new/menu.jsp" %>
    <section id="content" class="container">
        <div class="block-area" id="search">
            <div class="row">
                <input type="hidden" id="workId" value="${work.id}"/>
                <input type="hidden" id="detailId" value="${detailId}"/>
                <div class="col-md-2 form-group">
                    <label>开始日期：</label>
                    <input type="text" class="form-control input-append date form_datetime" readonly value="${createDate}" id="startDate" data-rule="required" placeholder="..."/>
                </div>
                <div class="col-md-2 form-group">
                    <label>结束日期：</label>
                    <input type="text" class="form-control input-append date form_datetime" readonly value="${createDate}" id="endDate" data-rule="required" placeholder="..."/>
                </div>
                <div class="col-md-6 form-group" style="margin-top: 23px;">
                    <button id="c_search" class="btn btn-alt m-r-5">查询</button>
                    <button class="btn btn-alt m-r-5" onclick="goBack()">返回</button>
                </div>
            </div>
            <p style="margin-top: 10px;">视频名称：${work.name}</p>
            <p style="margin-bottom: -5px;margin-top: -5px">分集名称：${workVideo.name}</p>
            <p style="margin-bottom: -5px;margin-top: 10px;">播放量：<span id="showAllPlayNum">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;弹幕数：<span id="showAllBarrageNum">0</span></p>
            <span id="hiddenSpan" style="display: none;"></span>
        </div>
        <hr class="whiter m-t-20"/>
        <!-- form表格 -->
        <div class="block-area" id="tableHover">
            <table class="table table-bordered table-hover tile" id="dataTables" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>日期</th>
                    <th>播放量</th>
                    <th>弹幕数</th>
                </tr>
                </thead>
            </table>
        </div>
    </section>
    <br/><br/>
</section>
<!-- JS -->
<%@ include file="../inc/new/foot.jsp" %>

<script>
    comment = {
        v: {
            list: [],
            dTable: null,
            allPlayNum: 0,
            allBarrageNum: 0
        },
        fn: {
            init: function () {
                comment.fn.dataTableInit();

                $("#c_search").click(function () {
                    comment.v.allPlayNum = 0;
                    comment.v.allBarrageNum = 0;

                    $('#hiddenSpan').html('');

                    comment.v.dTable.ajax.reload();
                });
            },
            dataTableInit: function () {
                comment.v.dTable = $leoman.dataTable($('#dataTables'), {
                    "processing": true,
                    "serverSide": true,
                    "searching": false,
                    "ajax": {
                        "url": "${contextPath}/admin/statData/work/detail/listPlus",
                        "type": "POST"
                    },
                    "columns": [
                        {"data": "createDate"},
                        {"data": "playNum"},
                        {"data": "barrageNum"}
                    ],
                    "createdRow": function (row, data) {
                        var spanVal = $('#hiddenSpan').html();

                        if (spanVal.indexOf('@' + data.id + ',') == -1) {
                            $('#hiddenSpan').html(spanVal + '@' + data.id + ',');

                            comment.v.allPlayNum += data.playNum;
                            comment.v.allBarrageNum += data.barrageNum;

                            $('#showAllPlayNum').html(comment.v.allPlayNum);
                            $('#showAllBarrageNum').html(comment.v.allBarrageNum);
                        }
                    },
                    "fnServerParams": function (aoData) {
                        aoData.workId = $("#workId").val();
                        aoData.detailId = $("#detailId").val();
                        aoData.startDate = $("#startDate").val();
                        aoData.endDate = $("#endDate").val();
                    }
                });
            }
        }
    }
    $(function () {
        comment.fn.init();
    })
</script>
<script>
    $('.form_datetime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: "2",
        forceParse: 0,
        showMeridian: 1,
        format: 'yyyy-mm-dd'
    });

    function goBack() {
        window.location.href = '${contextPath}/admin/statData/work/detail/index?workId=' + $('#workId').val();
    }
</script>
</body>
</html>

